<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户注册</title>
        <!-- 新 Bootstrap 核心 CSS 文件 -->
        <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
         
        <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
         
        <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
        <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"><script>

	
<script>
		function checkUname() {
			//1,从文本框提取用户名
			username = $("#uname").val();
			console.log(username)
			//2,正则表达式
			regexp = /^[a-zA-Z0-9]{6,20}$/;
			if (!regexp.test(username)) {
				//jQuery语法
				$("#uname").css("boder","1px solid red");
			}else{
				$("uname").css("border","");
			}
		}
		
		function checkTel(){
			mobile = $("#tel").val();
			regexp = /^[0-9]{11}$/;
			if (!regexp.test(mobile)) {
				$("#tel").css("boder","1px solid red")
			}else{
				$("uname").css("border","")
			}
		}
		 
		 function checkAll() {
			 checkUname();
			 checkTel();
		 }
	</script>

	
	</head>
	<body>
		<div class="container">
			<h2>用户注册</h2>
			<form>
		         <div class="form-group">
					 <label>用户名</label>
					 <input onblur="checkUname()" class="form-control" type="text" name="" id="uname" placeholder="请输入用户名" />	         	
		         </div>
				 <div >
				 <div class="form-group">
					<label>手机号码</label>
					<input onblur="checkTel" class="form-control" type="text" name="" id="tel" placeholder="请输入手机号" />		
				 </div>				
				<button onclick="checkAll" type="button" class="btn btn-danger">注册</button>	 		
			</form>
				
		</div>
	</body>
</html>
